<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投票</title>
    <link rel="stylesheet" href="task7-2.css">
     <script type="text/javascript" src="task7.js"></script>
</head>
<body>
    <!-- 头部 -->
    <div class="header">

        <!-- 左图标 -->
        <div class="page">
            <img src="./img/page.png" alt="" onclick="window.open('./task7-1.html')">    
        </div>

        <p>投票</p>

       <!-- 关闭图标 -->
        <div class="close">
            <img src="./img/close.png" alt="">
        </div>
    </div>
<div class="container"> 

<!-- 提示框 -->
<div class="tips">
<div class="triangle">
<span><em></em></span>
发言讨论结束，大家请投票
<div class="music-btn" id="music" onclick="playMusic()"><img src="./img/play.png" alt="">
    <audio  controls id="player">
        <source src="./music.mp3" type="audio/ogg"/>
        <source src="./music.mp3" type="audio/mpeg"/>
    </audio>
    </div>
</div>
</div>
<p>点击得票数最多人的头像</p>

<!-- 角色名称小格子 -->
<div class="row">
 
    <!-- 角色 -->
       <div class="role">
        <div class="text">警察</div>   
        <div class="number">13号</div>
        <!-- 四个小按钮 -->
        <div class="hover-help">
        <li class="btn">
            <button type="button" class="btn-1"><img src="./img/black.png" alt=""></button>
            <button type="button" class="btn-2"><img src="./img/yellow.png" alt=""></button>
            <button type="button" class="btn-3"><img src="./img/green.png" alt=""></button>
            <button type="button" class="btn-4"><img src="./img/red.png" alt=""></button>
        </li>
        </div>
    </div>

    <!-- 角色 -->
    <div class="role">
            <div class="text">警察</div>   
            <div class="number">13号</div>
            <!-- 四个小按钮 -->
            <div class="hover-help">
            <li class="btn">
                <button type="button" class="btn-1"><img src="./img/black.png" alt=""></button>
                <button type="button" class="btn-2"><img src="./img/yellow.png" alt=""></button>
                <button type="button" class="btn-3"><img src="./img/green.png" alt=""></button>
                <button type="button" class="btn-4"><img src="./img/red.png" alt=""></button>
            </li>
            </div>
        </div>

        <!-- 角色 -->
       <div class="role">
            <div class="text">警察</div>   
            <div class="number">13号</div>
            <!-- 四个小按钮 -->
            <div class="hover-help">
            <li class="btn">
                <button type="button" class="btn-1"><img src="./img/black.png" alt=""></button>
                <button type="button" class="btn-2"><img src="./img/yellow.png" alt=""></button>
                <button type="button" class="btn-3"><img src="./img/green.png" alt=""></button>
                <button type="button" class="btn-4"><img src="./img/red.png" alt=""></button>
            </li>
            </div>
        </div>
  
            <!-- 角色 -->
       <div class="role">
            <div class="text">警察</div>   
            <div class="number">13号</div>
            <!-- 四个小按钮 -->
            <div class="hover-help">
            <li class="btn">
                <button type="button" class="btn-1"><img src="./img/black.png" alt=""></button>
                <button type="button" class="btn-2"><img src="./img/yellow.png" alt=""></button>
                <button type="button" class="btn-3"><img src="./img/green.png" alt=""></button>
                <button type="button" class="btn-4"><img src="./img/red.png" alt=""></button>
            </li>
            </div>
        </div>

           <!-- 角色 -->
       <div class="role">
            <div class="text">警察</div>   
            <div class="number">13号</div>
            <!-- 四个小按钮 -->
            <div class="hover-help">
            <li class="btn">
                <button type="button" class="btn-1"><img src="./img/black.png" alt=""></button>
                <button type="button" class="btn-2"><img src="./img/yellow.png" alt=""></button>
                <button type="button" class="btn-3"><img src="./img/green.png" alt=""></button>
                <button type="button" class="btn-4"><img src="./img/red.png" alt=""></button>
            </li>
            </div>
        </div>

           <!-- 角色 -->
       <div class="role">
            <div class="text">警察</div>   
            <div class="number">13号</div>
            <!-- 四个小按钮 -->
            <div class="hover-help">
            <li class="btn">
                <button type="button" class="btn-1"><img src="./img/black.png" alt=""></button>
                <button type="button" class="btn-2"><img src="./img/yellow.png" alt=""></button>
                <button type="button" class="btn-3"><img src="./img/green.png" alt=""></button>
                <button type="button" class="btn-4"><img src="./img/red.png" alt=""></button>
            </li>
            </div>
        </div>

   <!-- 角色 -->
   <div class="role">
        <div class="text">警察</div>   
        <div class="number">13号</div>
        <!-- 四个小按钮 -->
        <div class="hover-help">
        <li class="btn">
            <button type="button" class="btn-1"><img src="./img/black.png" alt=""></button>
            <button type="button" class="btn-2"><img src="./img/yellow.png" alt=""></button>
            <button type="button" class="btn-3"><img src="./img/green.png" alt=""></button>
            <button type="button" class="btn-4"><img src="./img/red.png" alt=""></button>
        </li>
        </div>
    </div>


   <!-- 角色 -->
   <div class="role">
        <div class="text">警察</div>   
        <div class="number">13号</div>
        <!-- 四个小按钮 -->
        <div class="hover-help">
        <li class="btn">
            <button type="button" class="btn-1"><img src="./img/black.png" alt=""></button>
            <button type="button" class="btn-2"><img src="./img/yellow.png" alt=""></button>
            <button type="button" class="btn-3"><img src="./img/green.png" alt=""></button>
            <button type="button" class="btn-4"><img src="./img/red.png" alt=""></button>
        </li>
        </div>
    </div>

       <!-- 角色 -->
       <div class="role">
            <div class="text">警察</div>   
            <div class="number">13号</div>
            <!-- 四个小按钮 -->
            <div class="hover-help">
            <li class="btn">
                <button type="button" class="btn-1"><img src="./img/black.png" alt=""></button>
                <button type="button" class="btn-2"><img src="./img/yellow.png" alt=""></button>
                <button type="button" class="btn-3"><img src="./img/green.png" alt=""></button>
                <button type="button" class="btn-4"><img src="./img/red.png" alt=""></button>
            </li>
            </div>
        </div>

           <!-- 角色 -->
       <div class="role">
            <div class="text">警察</div>   
            <div class="number">13号</div>
            <!-- 四个小按钮 -->
            <div class="hover-help">
            <li class="btn">
                <button type="button" class="btn-1"><img src="./img/black.png" alt=""></button>
                <button type="button" class="btn-2"><img src="./img/yellow.png" alt=""></button>
                <button type="button" class="btn-3"><img src="./img/green.png" alt=""></button>
                <button type="button" class="btn-4"><img src="./img/red.png" alt=""></button>
            </li>
            </div>
        </div>
 <!-- 角色 -->
 <div class="role">
        <div class="text">警察</div>   
        <div class="number">13号</div>
        <!-- 四个小按钮 -->
        <div class="hover-help">
        <li class="btn">
            <button type="button" class="btn-1"><img src="./img/black.png" alt=""></button>
            <button type="button" class="btn-2"><img src="./img/yellow.png" alt=""></button>
            <button type="button" class="btn-3"><img src="./img/green.png" alt=""></button>
            <button type="button" class="btn-4"><img src="./img/red.png" alt=""></button>
        </li>
        </div>
    </div>

       <!-- 角色 -->
       <div class="role">
            <div class="text">警察</div>   
            <div class="number">13号</div>
            <!-- 四个小按钮 -->
            <div class="hover-help">
            <li class="btn">
                <button type="button" class="btn-1"><img src="./img/black.png" alt=""></button>
                <button type="button" class="btn-2"><img src="./img/yellow.png" alt=""></button>
                <button type="button" class="btn-3"><img src="./img/green.png" alt=""></button>
                <button type="button" class="btn-4"><img src="./img/red.png" alt=""></button>
            </li>
            </div>
        </div>

           <!-- 角色 -->
       <div class="role">
            <div class="text">警察</div>   
            <div class="number">13号</div>
            <!-- 四个小按钮 -->
            <div class="hover-help">
            <li class="btn">
                <button type="button" class="btn-1"><img src="./img/black.png" alt=""></button>
                <button type="button" class="btn-2"><img src="./img/yellow.png" alt=""></button>
                <button type="button" class="btn-3"><img src="./img/green.png" alt=""></button>
                <button type="button" class="btn-4"><img src="./img/red.png" alt=""></button>
            </li>
            </div>
        </div>

</div>
</div>

<div class="footer">
    <button type="button" onclick="window.open('./task7-3.html')">投死</button>
</div>

 
 

 


</body>
</html>